<!-- <template>
    <div class="item-container">
        <div
            v-for="(item, index) in items"
            :key="index"
            class="item"
            :style="{ width: isExpanded[index] ? '30px' : '10px' }"
            @mouseover="expandItem(index)"
            @mouseout="shrinkItem(index)"
        >
            <div
                class="title"
                :style="{ width: isExpanded[index] ? '30px' : '10px' }"
            >
                {{ item.title }}
            </div>
            <transition name="content-fade">
                <div v-if="isExpanded[index]" class="content">
                    {{ item.content }}
                </div>
            </transition>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const items = reactive([
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' },
    { title: 'Title 1', content: 'Content 1' },
    { title: 'Title 2', content: 'Content 2' }
]);

const isExpanded = ref(new Array(50).fill(false));

function expandItem(index) {
    isExpanded.value[index] = true;
}

function shrinkItem(index) {
    isExpanded.value[index] = false;
}
</script>

<style scoped lang="scss">
.item-container {
    display: flex;
    overflow-x: auto;
    justify-content: center;
    margin-top: 100px;

    .item {
        width: 40px;
        height: 700px;
        border: 1px solid #ccc;
        margin-right: 5px;
        transition: width 0.3s ease;
        position: relative;
    }
}

.title {
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: width 0.3s ease;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    overflow-y: auto;
    padding: 5px;
    box-sizing: border-box;
}

.content-fade-enter-active,
.content-fade-leave-active {
    transition: opacity 0.3s ease;
}

.content-fade-enter-from,
.content-fade-leave-to {
    opacity: 0;
}
</style> -->

<!-- <template>
    <div class="item" v-for="item in 10">
        <div class="title">标题1</div>
        <div class="content">内容1</div>
    </div>
</template>

<style>
.item {
    width: 30px; /* 宽度设置为30px */
    height: 50px; /* 高度设置为50px */
    float: left; /* 使得每个item都横向排列 */
    margin-right: 10px; /* 可以根据需要调整间距 */
    position: relative; /* 相对定位，用于后续绝对定位的子元素定位 */
    overflow: hidden; /* 隐藏溢出部分内容 */
}

.title {
    width: 100%; /* 标题宽度100% */
    height: 50px; /* 标题高度50px */
    background-color: lightblue; /* 默认背景色 */
    text-align: center; /* 文本居中 */
    line-height: 50px; /* 行高等于高度，使文本垂直居中 */
    position: absolute; /* 绝对定位，使内容盒子能够覆盖住整个标题盒子 */
    top: 0; /* 顶部位置0 */
    left: 0; /* 左侧位置0 */
    transition: background-color 0.3s ease; /* 过渡效果，使背景颜色变化平滑 */
}

.content {
    width: 100%; /* 内容宽度100% */
    height: 50px; /* 内容高度50px */
    background-color: lightblue; /* 默认背景色 */
    text-align: center; /* 文本居中 */
    line-height: 50px; /* 行高等于高度，使文本垂直居中 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部位置0 */
    left: 0; /* 左侧位置0 */
    opacity: 0; /* 默认隐藏内容 */
    transition: opacity 0.3s ease; /* 过渡效果，使内容显现平滑 */
}

.item:hover .title {
    background-color: lightgreen; /* 鼠标悬停时标题背景色 */
}

.item:hover .content {
    opacity: 1; /* 鼠标悬停时显示内容 */
}
</style> -->

<template>
    <div>
        <iframe
            src="http://1.95.13.110:8082/#/green/show1"
            frameborder="0"
            class="iframe"
        >
        </iframe>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.iframe {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 0;
    top: 0px;
}
</style>
